<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

<button id="id1" onclick="gaode()" style="width:250px; height:100px;">clickMe2Gaode</button>
<br>
<br>
<button id="id2" onclick="baidu()" style="width:250px; height:100px;">clickMe2Baidu</button>
<br>
<br>
<button id="id3" onclick="tx()" style="width:250px; height:100px;">clickMe2Tx</button>
<script>


    let mapType = ''
    const currAddr = '开始地点'
    const curLng = 120
    const curLat = 30
    const endLat = 31
    const endLng = 121
    const endAddr = '结束地点'
    const cityName = '杭州'

    function ToggleAppAndH5(AppUrl, AppCallback = () => {}) {
        // 先走APP
        const ifr = document.createElement('iframe');
        ifr.src = AppUrl;
        ifr.style.display = 'none';
        document.body.appendChild(ifr);
        setTimeout(function () {
            document.body.removeChild(ifr);
        }, 3000);

        // 800毫秒后调用H5链接
        let timer = setTimeout(function () {
            clearTimeout(timer);
            AppCallback();
        }, 800);

        window.onblur = function () {
            clearInterval(timer);
        };
    }

    function Callback() {
        // 这里放相关H5链接
        if (mapType === 'baidu') {
            location.href = "http://api.map.baidu.com/direction?origin=latlng:" + curLat + "," + curLng + "|name:" + currAddr + "&destination=latlng:" + endLat + "," + endLng + "|name:" + endAddr + "&region=" + cityName + "&mode=driving&output=html&src=com.youbei.chefu";
        } else if (mapType === 'amap') {
            location.href = "https://ditu.amap.com/dir?type=car&from[lnglat]=" + curLng + "," + curLat + "&from[name]=" + currAddr + "&to[lnglat]=" + endLng + "," + endLat + "&to[name]=" + endAddr + "&src=com.youbei.chefu"
        } else if(mapType === 'qqmap') {
            location.href = "https://map.qq.com/m/index/nav/type=drive&cond=0&sword=" + currAddr + "&spointx=" + curLng + "&spointy=" + curLat + "&eword=" + endAddr + "&epointx=" + endLng + "&epointy=" + endLat
        }
    }

    const u = navigator.userAgent;
    const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端


    function gaode() {
        mapType = 'amap'
        // 苹果和安卓头部不一样
        let proto = isiOS ? 'iosamap://path' : 'amapuri://route/plan';
        const AppUrl = proto + "?t=0&slat=" + curLat + "&slon=" + curLng + "&sname=" + currAddr + "&dlat=" + endLat + "&dlon=" + endLng + "&dname=" + endAddr + "&src=xxx";
        ToggleAppAndH5(AppUrl, Callback)
    }


    function baidu() {
        mapType = 'baidu'
        // 苹果和安卓头部不一样
        let proto = isiOS ? 'baidumap://' : 'bdapp://'
        const AppUrl = proto + "map/direction?region=" + cityName + "&origin=latlng:" + curLat + "," + curLng + "|name:" + currAddr + "&destination=latlng:" + endLat + "," + endLng + "|name:" + endAddr + "&coord_type=bd09ll&mode=driving&src=com.youbei.chefu";
        ToggleAppAndH5(AppUrl, Callback)
    }

    function tx() {
        mapType = 'qqmap'
        let proto = 'qqmap://map/routeplan'
        const AppUrl = proto + "?type=drive&from=" + currAddr + "&fromcoord" + curLat+","+curLng + "&to="+endAddr + "&tocoord=" + endLat+","+endLng + "&referer=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"
        ToggleAppAndH5(AppUrl, Callback)
    }


    // 腾讯地图api文档 https://lbs.qq.com/uri_v1/guide-mobile-navAndRoute.html
    // 高德地图api文档 https://lbs.amap.com/api/amap-mobile/guide/ios/route
    // 百度地图api文档 http://lbsyun.baidu.com/index.php?title=uri/api/android#service-page-anchor9
</script>
</body>
</html>

